<template>
	<view class="pages">
		<uni-popup ref="cancelOrderPopup" type="center" :animation="true" @change="changePopup($event,'cancelOrderPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">确定取消当前订单吗？</view>
							<view class="psdBox-input--1"></view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('cancelOrderPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="cancelOrder()">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入支付密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入支付密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头部 -->
		<pagehead :pagesPath="'/pagesMain/user/user'">我的订单</pagehead>
		<view class="sellOrder mainPd" :class="{'mainPd--ios' : system_info.platform == 'ios'}">
			<view class="tab">
				<view v-for="(item,index) in typeList" :key="index"
				:class="[currentIndex==index?'active':'','item']" @tap="changeTab(index,item)">{{item.name}}</view>
			</view>
			<view class="sellOrder-wrapper">
				<view class="sellOrder-list" v-if="isShowPage == true">
					<view class="sellOrder-list__item" v-for="(keyItem,keyIndex) in orderList" :key="keyIndex"
					@tap.stop="$tools.jump('./orderDetails',keyItem.order_id)" v-if="keyItem.status !='00'">
					<view class="sellOrder-box">
						<view class="sellOrder-top">
							<view class="no">订单编号:{{ keyItem.order_id }}</view>
							<view class="status">{{ getStatus(keyItem.status) }}</view>
						</view>
						<view class="sellOrder-content noBorder">
							<view class="imgBox">
								<init-image class="img" :src="imgShow(keyItem.goods_show)" mode=""/>
							</view>
							<view class="content">
								<view class="name">{{ keyItem.goods_name }}</view>
								<view class="tips" v-if="keyItem.label">{{ keyItem.label }}</view>
								<view class="giveIntegral">
									<text class="price">{{keyItem.goods_price  }}</text>
								</view>
								<view class="num">x{{ keyItem.goods_num }}</view>
							</view>
						</view>
					</view>
						<view class="sellOrder-priceBox" :class="{'noBorder' : (keyItem.status == '-1' || keyItem.status == '02' || keyItem.status == '03' || keyItem.status == '04')}">
							<view class="zi">{{ keyItem.status == '01' ? '需付款' : '实付金额' }}</view>
							<view class="money">
								<template v-if="keyItem.cash_num ">¥{{ keyItem.cash_num }}</template>
								<template v-else>¥{{ keyItem.cash_num }}</template>
							</view>
						</view>
						<!-- <view class="sellOrder-priceBox" v-if="keyItem.express_cash>0">
							<view class="zi">邮费</view>
							<view class="money">
								{{keyItem.express_cash}}
							</view>
						</view> -->
						<view class="sellOrder-bottom" v-if="keyItem.status == '00' || keyItem.status == '03'">
							<view class="status"></view>
							<view class="btnBox">
								<view class="cancelBox" v-if="keyItem.status == '00'" @tap.stop="cancelOrderPopup(keyItem)">
									<view class="cancel"><text>取消订单</text></view>
								</view>
								<view class="ship" v-if="keyItem.status == '00'" @tap.stop="pay(keyItem)">立即付款</view>
								
								<!-- <view class="cancelBox" v-if="keyItem.status == 2" @tap.stop="$tools.jump('./seeLog',keyItem.orderId)">
									<view class="cancel"><text>查看物流</text></view>
								</view>
								<view class="cancelBox" v-if="keyItem.status == 1 || keyItem.status == 2" 
								@tap.stop="$tools.jump('/pages/afterSales/afterSales',keyItem.orderId)">
									<view class="cancel"><text>申请售后</text></view>
								</view> -->
								<view class="ship" v-if="keyItem.status == '03'" @tap.stop="confirmOrder(keyItem.order_id)">确认收货</view>
							</view>
						</view>
						<!-- <view class="sellOrder-tipsBox" v-if="keyItem.status == 1 || keyItem.status == 2 || keyItem.status == 3">
							<template v-if="keyItem.status == 1">
								待发货<text>｜已通知商家发货 </text>
							</template>
							<template v-else-if="keyItem.status == 2">
								待取件<text>｜顺丰快递：快递已暂存xxxxxxxxxxxxx如... </text>
							</template>
							<template v-else-if="keyItem.status == 3">
								已签收<text>｜顺丰快递：快递已暂存xxxxxxxxxxxxx如... </text>
							</template>
						</view> -->
					</view>
					<view class="initNoData" v-if="orderList.length == 0">—暂无内容—</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				tabActive: 0,
				orderId: '',
				password: '',
				lsShow: true,
				isShowPage: true,
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				payActive: -1,
				paymentTypeList: [],
				goodsTotal: '',
				toggle: true,
				keyItemObj: {},
				system_info: '',
				lastId:'',
				currentIndex:0,
				status:'00',
				orderList:[
					// {orderId:'222',status:0,totalNum:1,price:100,payPrice:100,
					// storeProduct:{image:'static/images/kong.png',vipPrice:100,storeName:'缅甸纯天然翡翠手镯烟灰色油青色玉手'}}
				]
			}
		},
		computed:{
			typeList(){
				return [
					{name: '全部',status:'00'},
					// {name: '待付款',status:'01'},
					{name: '待发货',status:'02'},
					{name: '待收货',status:'03'},
					{name: '已完成',status:'04'},
				]
			},
			getStatus(){
				// 00-全部订单01-待付款订单02-待发货订单03-待收货订单04-交易完成订单05-已取消订单
				return function(type){
					switch (type){
						case '00':
							return '待付款';
							break;
						case '02':
							return '待发货';
							break;
						case '03':
							return '待收货';
							break;
						case '04':
							return '已取消 ';
							break;
						case '05':
							return '退款';
							break;
						case '08':
							return '已冻结';
							break;
						case '09':
							return '已完成';
							break;
					}
				}
			},
		},
		onLoad(options) {
			console.log(options.value1)
			if(options.value1){
				this.tabActive = Number(options.value1) + 1;
			}
		},
		onShow() {
			this.init();
			this.system_info = uni.getSystemInfoSync();
			console.log("system_info:",this.system_info.platform);
		},
		 // 下拉刷新
		 onPullDownRefresh() {
			console.log('refresh');
			this.init();
			this.isLoadShow = true;
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			console.log("分页");
			if(this.lsShow == true){
				this.getOrderList();
			}else{
				// return this.$tools.toast('到底了');
			}
		},
		methods: {
			init(){
				this.lsShow = true;
				this.isShowPage = false;
				this.pages = 1;
				this.pageIndex = 1;
				this.lastId = '';
				this.orderList = [];
				this.getOrderList();
				// this.getUserMoney();
			},
			// 切换
			changeTab(index,item){
				if(this.currentIndex != index){
					this.currentIndex = index
					this.status = item.status
					this.init()
				}
			},
			// 立即支付
			pay(keyItem){
				this.keyItemObj = keyItem;
				this.$tools.jump('./orderDetails',keyItem.id);
				// if(this.keyItemObj.isChannel == 1){
				// 	this.openPopup('psdPopup');
				// }else{
				// 	this.upPayOrder();
				// }
			},
			// 线上微信，支付宝，银行卡支付
			upPayOrder(){
				var data = {
					"orderId": this.keyItemObj.id,
					// "from": this.keyItemObj.isChannel,
					"payType": this.keyItemObj.payType,
					// "orderStatus": 2
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/shop/order/payAction',
				data,
				res => {
						if(res.code == 200){
							// this.$tools.toastJump(res.data,'./success',1);
							if(this.keyItemObj.isChannel == 2){
								var provider = 'alipay'
							}else if(this.keyItemObj.isChannel == 3){
								var provider = 'wxpay'
							}
							// #ifdef H5
								location.href = JSON.parse(res.data).expend.pay_info;
							// #endif
							// #ifdef APP-PLUS
								uni.requestPayment({
								    provider: provider,
								    orderInfo: res.data,
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										this.$tools.toastJump('支付成功','./success',1);
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
								    }
								});
							// #endif
							uni.hideLoading();
						}
					},err => {
						uni.hideLoading();
					}
				)
			},
			// 聚宝豆支付
			psdSubmit(){
				if (this.password == '' ) {
					return this.$tools.toast('请输入支付密码');
				}
				var data = {
					"orderId": this.keyItemObj.id,
					// "from": this.keyItemObj.isChannel,
					"payType": this.keyItemObj.payType,
					"payPwd": this.$md5(this.password),
					// "orderStatus": 2
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/shop/order/payAction',
				data,
				res => {
						if(res.code == 200){
							this.$tools.toastJump(res.data,'./success',1);
							this.hidePopup('psdPopup');
							uni.hideLoading();
						}
					},err => {
						console.log("err：",err);
						if(err.errorCode == 1014){
							this.$tools.toastJump('请设置支付密码','/pages/setup/editPayPsd',1);
						}
						uni.hideLoading();
					}
				)
			},
			// 取消订单
			cancelOrderPopup(item){
				this.orderId = item.id;
				this.openPopup('cancelOrderPopup');
			},
			cancelOrder(){
				var data = {
					"id": this.orderId,
					"orderStatus": 1
				};
				console.log("data:",data);	
				this.$Ajax('/shop/order/canalStoreOrder',data,res => {
						if (res.code == 200) {
							this.$tools.toast('取消订单成功');
							this.isShowPage = false;
							// this.pages = 1;
							// this.pageIndex = 1;
							this.lastId = ''
							this.orderList = [];
							this.getOrderList();
							this.hidePopup('cancelOrderPopup');
						}
					},err => {
					}, 'GET'
				)
			},
			// 确认收货打开
			confirmOrderPopup(){
				this.openPopup('comfimOrderPopup');
			},
			// 确认收货
			confirmOrder(orderId){
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定收货',
					showCancel: true,
					success: ({ confirm, cancel }) => {
						if(confirm){
							var data = {
								order_id:orderId
							};
							console.log("data：",data);
							that.$Ajax('/api/productOrder/confirmSysProductOrder',data,
							res => {
									if (res.success) {
										that.$tools.toast("确认收货成功");
										that.init();
									}
								},err =>{
								}
							)
						}
					}
				})
			},
			// 订单列表
			getOrderList() {
				var data = {
					order_type:this.status,
					last_id:this.lastId,
				};
				console.log("data：",data);
				uni.showLoading({
					mask: true
				})
				this.$Ajax('/api/productOrder/getSysProductOrderList',data,res => {
					uni.hideLoading();
						if (res.success) {
							this.isShowPage = true;
							// this.pages = res.data.pages;
							this.orderList = this.orderList.concat(res.data.sysProductOrderList);
							if(res.data.sysProductOrderList.length > 0){
								this.lastId = res.data.sysProductOrderList[res.data.sysProductOrderList.length-1].id;
							}else{
								this.lsShow = false;
							}
							this.$forceUpdate(); 
							console.log(this.orderList);
						} 
					},err => {
						uni.hideLoading();
					}
				)
			},
			changeTypeList(index) {
				if(this.tabActive != index){
					this.tabActive = index;
					this.lsShow = true;
					this.isShowPage = false;
					this.pageIndex = 1;
					this.lastId = ''
					this.orderList = [];
					this.getOrderList();
				}
			},
			getPayCheck(index){
				if(this.payActive != index){
					this.payActive = index;
				}
			},
			backMethod(){
				this.$tools.jump('/pagesMain/user/user')
			},
			/* 弹出框公用 */
			openPopup(e) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				this.typePopup = e.type;
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header + view{
		padding-top: 0 !important;
	}
	.tabsBox{
		height: 90rpx;
		background: #2B2B2B;
	}
	.tabbar{
		&-item{
			width: 50%;
		}
	}
	.giveIntegral{
		margin-top: 14rpx;
		color: #FFB156;
		display: flex;
		align-items: center;
		.text{
			background: #585851;
			padding: 6rpx 16rpx;
			border-radius: 12rpx;
			font-size: 20rpx;
		}
		.span{
			background: linear-gradient(270deg, #FFB156 0%, #F0B90B 98%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.sellOrder{
		.tab{
			@include flexBetween;
			background: #FFFFFF;
			padding: 38rpx 20rpx;
			.item{
				// width: 200rpx;
				// text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0rpx 20rpx;
				font-size: 24rpx;
				color: #666;
				background: #F3F4F9;
				border-radius: 134rpx;
			}
			.active{
				background: #AD2926;
				color: #fff;
			}
		}
		&-wrapper{
			// padding: 20rpx 24rpx;
		}
		&-list{
			width: 100%;
			@include flexLeftColumn;
			&__item{
				@include flexLeftColumn;
				width: 93.6%;
				margin: auto;
				margin-top: 20rpx;
				background: #fff;
				border-radius: 12rpx;
				padding: 32rpx 24rpx 16rpx;
				margin-bottom: 20rpx;
			}
		}
		&-box{
			width: 100%;
		}
		&-top{
			@include flexBetween;
			width: 100%;
			.no{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.8);
			}
			.status{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #AD2926;
			}
		}
		&-content{
			@include flexLeft;
			width: 100%;
			padding-top: 24rpx;
			padding-bottom: 16rpx;
			border-bottom: 1px solid #E9E9E9;
			image{
				width: 208rpx;
				height: 208rpx;
				// border-radius: 12rpx;
			}
			.imgBox{
				background: #EDEDED;
				width: 160rpx;
				height: 160rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				width: calc(100% - 208rpx - 24rpx);
				@include flexLeftColumn;
				margin-left: 24rpx;
				.name{
					font-size: 28rpx;
					font-family: PingFang HK, PingFang HK;
					font-weight: 500;
					color: #333;
					@include initMoreLine(1);
				}
				.tips{
					font-size: 28rpx;
					font-family: PingFang HK-Medium, PingFang HK;
					font-weight: 500;
					color: #666;
					margin: 8rpx 0 16rpx;
				}
				.num{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255,255,255,0.9);
					margin-top: 10rpx;
					// margin: 0 0 16rpx;
				}
				.time{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin: 16rpx 0;
				}
				.price{
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #AD2926;
					&::before{
						content: '￥';
						font-size: 24rpx;
						color: #AD2926;
						margin-top: 8rpx;
					}
				}
			}
		}
		.noBorder{
			border-bottom: none;
		}
		&-bottom{
			@include flexBetween;
			width: 100%;
			// height: 60rpx;
			// margin: 0 20rpx;
			padding-top: 20rpx;
			border-top: 1px solid #eee;
			.status{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.btnBox{
				@include flexRight;
				.cancelBox{
					// background:#AD2926;
					padding: 4rpx;
					border-radius: 132rpx;
					width: 188rpx;
					margin: auto;
					.cancel{
						border-radius: 132rpx;
						border:1px solid #AD2926;
						// padding: 12rpx 38rpx;
						padding: 10rpx 0rpx;
						text-align: center;
						text{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #AD2926;
						}
					}
				}
				.ship{
					width: 188rpx;
					background: #AD2926;
					border-radius: 132rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff;
					// padding: 14rpx 48rpx;
					padding: 14rpx 0rpx;
					margin-left: 16rpx;
					text-align: center;
					white-space: nowrap;
				}
			}
		}
		&-tipsBox{
			@include flexLeft;
			background: #494949;
			border-radius: 8rpx;
			padding: 12rpx 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-bottom: 10rpx;
			text{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.60);
			}
		}
		&-priceBox{
			@include flexBetween;
			width: 100%;
			padding: 0 0 16rpx;
			.zi{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333;
			}
			.money{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #AD2926;
			}
		}
	}
	
	
</style>